<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            background-color: red;
            height: 80px;
        }
        .container{
            display: flex;
            height: 600px;
        }
        .leftbox{
            background-color: #0099cc;
            flex:2
        }
        .mainbox{
            background-color: #4cae4c;
            flex:8
        }
    </style>
</head>
<body>

<div id="app">
    <router-view></router-view>
    <div class="container">
        <router-view name="left"></router-view>
        <router-view name="main"></router-view>
    </div>
    <!--<a href="#/login">登录</a>-->
    <!--<a href="#/register">注册</a>-->
    <!--默认渲染为a标签  也可设置为span标签-->
    <!--tag设置标签-->
</div>

<script>
  var header={
    template:"<h1 class='header'>header头部区域</h1>"
  }
  var leftbox={
    template:"<h1 class='leftbox'>lefbox侧边栏区域</h1>"
  }
  var mainbox={
    template:"<h1 class='mainbox'> mainbox主体区域</h1>"
  }
  var router = new VueRouter({
    routes:[
      // {path:"/",componter:header}
      // {path:"/",componter:header},
      // {path:"/",componter:header},
      {path:"/",components:{
        default:header,
          left:leftbox,
          main:mainbox
        }}
    ]
  })

  var vm = new Vue({
    el: "#app",
    data: {},
    methods: {},
    router
  })

</script>

</body>
</html>